<<!include:header>>
    <style>
        label {
            position: relative;
            margin-left: 10px;
        }

        .input {
            opacity: 0;
        }

        .boderCheckBox {
            top: 50%;
            left: 0px;
            margin-top: -5px;
            width: 10px;
            height: 10px;
            position: absolute;
            border: 1px solid #e74725;
        }

        .input:checked+i {
            background-color: #e74725;
        }
    </style>
    <section class="hero-section litte-header">
        <div class="container">
            <div class="filtrate mb40 ft15    ">
                <div class="filtrate mb40 ft15   " style="margin-top:150px;color:#fff">

                </div>
            </div>
        </div>

    </section><!-- End Hero -->
    <div class="container" style="margin-top:50px;">
        <div class="row">

            <h5 style="margin-left: 30px;"> 当前课程: </h5>
        </div>
        <hr color="#f7f7f7" style="margin:0px;   border: 1px solid #d9d9d9">

        <div class="row align-items-center" style="margin-top:20px; margin-bottom: 30px;">

            <div class="col-md-6 col-xs-12 center-block" id="backgroundImg"></div>
            <div class="col-md-6 col-xs-12">
                <div class="row align-items-center" style="margin-top: 10px;">
                    <h4>
                        <span id="courseLabel"> </span>
                    </h4>
                </div>
                <div class="row " style="margin-top: 20px; min-height: 100px;">
                    <span id="courseDescription"> </span>

                </div>
                <div class="row align-items-center" style="background-color: #efefef; padding: 10px;">
                    <div class="col-md-9 col-xs-12 row align-items-center" id="priceList" style="color: red;">
                    </div>
                    <div class="col-md-3">
                        <span>总价¥:</span>
                        <span id="totalPrice" class="text-left" style="color: red;">
                        </span>
                    </div>


                </div>
                <div class="row align-items-center" style=" margin-bottom: 20px;">
                    <div class="col-xs-12   " style="margin-top:20px; margin-bottom: 20px; ">
                        本课程包含以下教材:
                    </div>

                    <div class="col-xs-12   " id="bookList">
                    </div>
                </div>
                <hr>
                <div class="row " style="background-color: #00000003; padding: 10px">
                    <div class="col-4 ">

                        <button type="button" style="padding: 4px 10px !important; " class="btn btn-warning  "
                            onclick="tryLearn()">现在试学</button>
                    </div>
                    <div class="col-4 "> <button type="button" style=" padding: 4px 10px !important; "
                            class="btn  btn-success " onclick="buyIt(0)">微信购买</button></div>

                    <div class="col-4"> <button type="button" style="padding: 5px 0px !important; "
                            class="btn btn-primary " onclick="buyIt(1)">支付宝购买</button>
                    </div>
                </div>



            </div>
        </div>


        <hr color="#f7f7f7" style="margin:20px;border:0;border-top: 1px solid rgba(0,0,0,.1)">

        <div class="row align-items-center " style="height: 70px; margin-top: 10px;">
            <div class="btn-group btn-group" style="width: 100%;" role="toolbar">
                <div class="btn btn-primary " onclick="switchAttachDiv('kcxq')">课程详情</div>
                <div class="btn btn-warning " onclick="switchAttachDiv('jxtx')">教学体系</div>
            </div>


        </div>
        <div class="row" id="kcxq" style="display: block;">

            资料准备中.敬请期待


        </div>
        <div class="row" id="jxtx" style="display: none;">


            资料准备中.敬请期待


        </div>
        <div>
            <div class="modal fade" id="wxpayModal" tabindex="-3" role="dialog" aria-labelledby="wxpayModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="wxpayModalLabel">

                            </h5>
                        </div>

                        <div style="padding-left: 110px; padding-top: 50px;padding-bottom: 50px;"
                            class="row center-block" id="wxqrcodeDiv">


                        </div>

                        <div class="modal-footer container">
                            <div class="row" style="margin:20px;width: 100%;">
                                <div id="wxprice" class="col-md-6 text-left"> </div>
                                <div id="wxprice" class="col-md-6 text-right"> <button type="button"
                                        style="margin-right:50px;border: none;" class="  btn-success "
                                        onclick="closeWxPayPanel()">关闭支付</button>
                                </div>

                            </div>


                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
        <script src="https://cdn.staticfile.org/js-sha1/0.6.0/sha1.min.js"></script>
        <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script>
            var allCollege;
            var allCourseKind;
            var currentSelectDay;//当前选中的天数
            var currentSelectBooks = [];// 当前选中的教材列表
            var daysObj = {};
            var courseObj = {};
            var totalPage;
            var id = 0;
            var selectBookNum = 0;
            var totalPrice = 0;
            var nowSecondTime;//交易时间
            var isPaying = false;// 是否已经打开了交易
            var jiaoyiCode = "";
            var tiemId = 0;
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == "id") {
                    id = pair[1];
                    break;
                }
            }

            axios.get('/api/course/' + id)
                .then(function (response) {
                    var res = response.data;
                    if (res.code != 200) {

                        alert(res.title)
                        return;
                    }
                    daysObj = {};
                    courseObj = res.data;
                    document.getElementById("courseLabel").innerText = courseObj.Label;
                    document.getElementById("backgroundImg").innerHTML = '<img src="' + courseObj.Background + '" style="width:400px;max-width:100%;"  /> ';
                    document.getElementById("courseDescription").innerText = courseObj.Description;


                    var booklistStr = "";
                    var bookSelectedDisable = " checked disabled "
                    for (var i = 0; i < courseObj.BookList.length; i++) {
                        if (courseObj.MustAllBook == 0) {
                            bookSelectedDisable = " checked "
                        }
                        booklistStr = booklistStr + ' <label><input ' + bookSelectedDisable + ' onChange="onBookCheck(' + courseObj.BookList[i].Id + ')" id="book_' + courseObj.BookList[i].Id + '" class="input" type="checkbox" >' + (i + 1) + " . " + courseObj.BookList[i].Label + '  <i class="boderCheckBox"></i></label>'
                        var bookPriceList = courseObj.BookList[i].PriceList;
                        for (var day in bookPriceList) {
                            daysObj[day] = bookPriceList[day]
                        }
                    }
                    var pricelistStr = '<span style="    margin: 10px;color:slategrey;"> 有效期: </span>';
                    var selectFirstStr = " checked ";
                    for (var day in daysObj) {
                        pricelistStr = pricelistStr + ' <label  style="    margin-bottom: 0px;"><input ' + selectFirstStr + ' onChange="onDayCheck(' + day + ')" id="day_' + day + '" name="selectDay" class="input" type="radio" >' + day + ' 天  <i class="boderCheckBox"></i></label>'
                        if (selectFirstStr != "") {
                            currentSelectDay = day;
                            selectFirstStr = "";
                        }

                    }
                    document.getElementById("priceList").innerHTML = pricelistStr;
                    document.getElementById("bookList").innerHTML = booklistStr;

                    document.getElementById("kcxq").innerHTML = '<img style="width:100%;max-width:100%;" src="' + courseObj.Kcxq + '"    /> ';
                    document.getElementById("jxtx").innerHTML = '<img style="width:100%;max-width:100%;" src="' + courseObj.Jxtx + '"   /> ';


                    calPrice();
                });
            function switchAttachDiv(divName) {
                document.getElementById("kcxq").style.display = 'none';
                document.getElementById("jxtx").style.display = 'none';

                document.getElementById(divName).style.display = 'block';
            }
            function onBookCheck() {
                currentSelectBooks = [];
                totalPrice = 0;
                selectBookNum = 0;
                var leijiaPrice = 0; // 每个教材的价格累加起来的数目.一般和全科购买时候的价格不一样.
                if (courseObj.MustAllBook == 0) {
                    if (courseObj.BookList) {
                        for (var i = 0; i < courseObj.BookList.length; i++) {
                            if (document.getElementById("book_" + courseObj.BookList[i].Id).checked) {
                                currentSelectBooks.push(courseObj.BookList[i].Id);
                                leijiaPrice += courseObj.BookList[i].PriceList[currentSelectDay];
                                selectBookNum++;
                            }
                        }
                        if (selectBookNum == courseObj.BookList.length) { // 如果全部选中了. 那么就直接给全科价
                            totalPrice = courseObj.QuanPrice[currentSelectDay];
                        } else {
                            totalPrice = leijiaPrice;
                        }
                    }

                } else {
                    for (var i = 0; i < courseObj.BookList.length; i++) {
                        currentSelectBooks.push(courseObj.BookList[i].Id);
                    }
                    totalPrice = courseObj.QuanPrice[currentSelectDay];
                }
                document.getElementById("totalPrice").innerText = totalPrice;
            }
            function calPrice() {
                totalPrice = 0;
                if (courseObj.MustAllBook == 1) {
                    if (courseObj.QuanPrice) {
                        totalPrice = courseObj.QuanPrice[currentSelectDay];
                        document.getElementById("totalPrice").innerText = totalPrice;
                    }

                } else {
                    onBookCheck();
                }
            }

            function onDayCheck(day) {

                currentSelectDay = day;
                calPrice();
            }
            function buyIt(paymethod) {
                wxQrcodeDiv = document.getElementById("wxqrcodeDiv")
                wxQrcodeDiv.innerHTML = "";


                var payObj = {};
                payObj.coupon_id = 0;
                payObj.course_id = parseInt(id);
                payObj.detail = [];
                payObj.days = parseInt(currentSelectDay);
                if (selectBookNum == courseObj.BookList.length) {
                    payObj.is_all = 1;
                } else {
                    payObj.is_all = 0;
                    payObj.detail = currentSelectBooks
                }

                var nowTime = new Date().getTime() / 1000;
                nowSecondTime = Math.ceil(nowTime);
                var sign =
                    nowSecondTime +
                    "&" +
                    JSON.stringify(payObj) +
                    "&" +
                    sessionStorage.userID;
                axios.post('/api/pay/pay?isAlipay=' + paymethod + '&time=' + nowSecondTime + '&sign=' + sha1(sign), payObj, {
                    headers: {
                        'token': sessionStorage.getItem("token")
                    }
                })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            if (paymethod == 0) { //微信
                                isPaying = true;
                                $('#wxpayModal').modal('show');
                                document.getElementById("wxpayModalLabel").innerHTML = "微信支付:" + courseObj.Label;
                                document.getElementById("wxprice").innerHTML = "总金额:" + totalPrice + "元";
                                new QRCode(wxQrcodeDiv, response.data.data.url);
                                zhezhao = document.getElementsByClassName("modal-backdrop");
                                if (zhezhao && zhezhao.length > 0) {
                                    document.body.removeChild(zhezhao[0]);
                                }

                                jiaoyiCode = response.data.title;
                            } else if (paymethod == 1) {
                                window.open(response.data.data.url);
                            }

                        } else {
                            alert(response.data.title)
                        }
                    });

            }
            function closeWxPayPanel() {
                $('#wxpayModal').modal('hide');
                window.clearInterval(this.tiemId);
            }
            function tryLearn() {
                window.location.href = "/videoPlayer?id=" + id;
            }
            //checkPayed 检查是否应支付了
            function checkPayed() {
                if (isPaying) {

                    axios.get("/api/pay/wxAskResult/" + jiaoyiCode, "", {
                        headers: {
                            'token': sessionStorage.getItem("token")
                        }
                    })
                        .then(function (response) {
                            if (response.data.code == 200) {

                                this.isPaying = false;
                                window.clearInterval(this.tiemId);
                                if (response.data.code == 200) {
                                    console.log(response.data.data.url)
                                    window.open(response.data.data.url);
                                    location.href = response.data.data.url;
                                } else if (response.data.code == 500) {
                                    this.$router.go(-1);
                                }

                                console.log("检查是否支付了....")
                            }


                        })
                }
            }

            tiemId = setInterval(checkPayed, 2000)


        </script>
        <<!include:footer>>